<p>A responsive navbar can be achieved with an <code>ngbCollapse</code> directive.</p>

<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary mb-3">
	<div class="container-fluid">
		<a class="navbar-brand" [routerLink]="'.'">Responsive navbar</a>

		<!-- Step 3: Toggle the value of the property when the toggler button is clicked. -->
		<button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">&#9776;</button>

		<!-- Step 2: Add the ngbCollapse directive to the element below. -->
		<div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
			<ul class="navbar-nav">
				<li class="nav-item active">
					<!-- Step 4: Close the menu when a link is clicked. -->
					<a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Features</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Examples</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">About</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

<p>These steps were used to create this responsive navbar.</p>

<ol>
	<li>
		Add a property to the component to track whether the menu is open. In this example, the property is called
		<code>isMenuCollapsed</code>.
	</li>
	<li>
		Add an <code>ngbCollapse</code> directive to the element with the <code>navbar-collapse</code> CSS class. Use the
		property in the component as the value for the directive.
	</li>
	<li>When the navbar toggler button is clicked, toggle the value of the property in the component.</li>
	<li>
		If you would like the menu to close when a link is clicked, add a <code>(click)</code> handler to each link and set
		the property on the component to true to hide the menu.
	</li>
</ol>

<p>Resize your browser window to see it in action!</p>
